<template>
  <div id="app">
    <div id="left0" v-if="this.films.length!=0">    
      <div id="left">
      <span> <img :src="`/img/${tableData[0].imgno}.jpg`"></span>
      <div id="l1">
        <p >{{ this.films.length!=0?this.films[0].film.fname:0}}</p>
        <p>类型：{{this.tableData[0].typef1.pname}}/{{this.tableData[0].typef2.pname}}/{{this.tableData[0].typef3.pname}}/</p>
        <p>剧情介绍</p>
        <p id="dra">{{this.tableData[0].dra}}</p>
      </div>
    </div>
      <div id="l2">   
        <p>影院：{{this.films[0].cinema.cname}}</p>
        <p>影厅：{{this.films[0].room.rname}}</p>
        <p>观影时间：{{this.films[0].time}}</p>
        <p>票价：<span>{{this.films[0].price}} </span>元 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计：<span>{{heji}}</span>元</p>
        <button @click.prevent="queding">确认购买</button>
      </div>
    </div>
    <div v-else></div>
    <div id="right" >
      <div id="ri">
        <div>可选</div>
        <div>已选</div>
        <div>已售</div>
      </div>
      <div id="seats" v-if="this.seats.length!=0" >
        <div :class="[item.statu==0?'seat':item.statu==1?'seat2':'seat3']" v-for="(item,index) in seats" :key="index" @click="xuanze(item.no,item.pid,item.sid)">{{item.no}}</div>
      
      </div>
      <div v-else>bbbb </div>
    </div>


   
    
  </div>
  
</template>
<script>
  import {mapState} from 'vuex'
  import axios from 'axios'
  export default {
    name: 'buy',
    data(){
      return{
      tableData:[],
      films:[],
      seats:[],
      show:true,
      piaoshu:[],
      xuanzhong:false,
      seatid:[],
      
      }
  
    },
    components: {
      
    },
    methods:{
      queding(){
        if(this.piaoshu.length==0){
          this.$message.error("请选择座位后购票");
          return;
        }
        for(var x=0;x<this.seatid.length;x++){
          var i=this.seatid[x];
          var user=JSON.parse(sessionStorage.getItem('myuser'));
        console.log(344,user);
          axios.get("http://localhost:8080/insertlist/"+user.id+"/"+i+"/"+this.films[0].pid).then((resp) => {
          var n= resp.data;
    })   
        }
       
        axios.get("http://localhost:8080/updateseat2").then((resp) => {
        var n= resp.data;
        axios.get("http://localhost:8080/seat/"+this.$route.query.userId+"/"+this.$route.query.cid).then((resp) => {
      this.seats = resp.data;
      console.log(this.seats[0]);
    })
    })   

    this.$router.push({ path: '/gerenzhongxin'});

      },
      xuanze(no,pid,sid){
        this.show=!this.show;
        console.log(11,this.piaoshu.indexOf(no)===-1)
        if(this.seatid.indexOf(sid)===-1){
          this.seatid.push(sid); 
        }else{
          for(var k = 0;k< this.seatid.length;k++){
            console.log(11,this.seatid[k])
            if(this.seatid[k] === sid){
              this.seatid.splice(k,1);   
              k--;
            }
          }
        }
        if(this.piaoshu.indexOf(no)===-1){
          this.piaoshu.push(no); 
          axios.get("http://localhost:8080/updateseat1/"+no+"/"+pid).then((resp) => {
            var n=resp.data;
            axios.get("http://localhost:8080/seat/"+this.$route.query.userId+"/"+this.$route.query.cid).then((resp) => {
      this.seats = resp.data;
      console.log(this.seats[0]);
    })
    })
        }else{
          for(var k = 0;k< this.piaoshu.length;k++){
            console.log(11,this.piaoshu[k])
            if(this.piaoshu[k] === no){
              this.piaoshu.splice(k,1);   
              k--;
            }
          }
          axios.get("http://localhost:8080/updateseat0/"+no+"/"+pid).then((resp) => {
            var n=resp.data;
            axios.get("http://localhost:8080/seat/"+this.$route.query.userId+"/"+this.$route.query.cid).then((resp) => {
      this.seats = resp.data;
      console.log(this.seats[0]);
    })
    })
      

        }

     

      }
      
    },
    computed:{
      ...mapState(['film']),
      heji:function(){
        return this.films[0].price*this.piaoshu.length;
      }
    },
    created() {
      console.log(this.$route.query.userId);
      // console.log(this.$store.state.fid);
     axios.get("http://localhost:8080/oneFilm/"+this.$route.query.userId).then((resp) => {
      // axios.get("http://localhost:8080/oneFilm/"+this.$store.state.fid).then((resp) => {
      this.tableData = resp.data;
      console.log(this.tableData);
    });
    axios.get("http://localhost:8080/cinemaByFilm/"+this.$route.query.userId).then((resp) => {
      // axios.get("http://localhost:8080/cinemaByFilm/"+this.$store.state.fid).then((resp) => {
      this.films = resp.data;
      console.log(this.films[0].film.fname);
    });
    axios.get("http://localhost:8080/seat/"+this.$route.query.userId+"/"+this.$route.query.cid).then((resp) => {
      // axios.get("http://localhost:8080/cinemaByFilm/"+this.$store.state.fid).then((resp) => {
      this.seats = resp.data;
      console.log(this.seats[0]);
    })
  }
}
  </script>
<style scoped>
  *{
    padding: 0px;
    margin:0px;
  }
  #left0{
    /* background-color: aqua; */
    width: 400px;
    height: 340px;
    border-right:solid orange 5px;
    margin-left: 150px;
    margin-top:20px;
    margin-bottom: 40px;
    padding: 30px;
  }
  #left{
    margin-left: 20px;
    /* background-color: antiquewhite; */
    width: 400px;  
    display: flex;
  }
  #l1{
    width: 400px;
    margin-left:20px;
    height:200px;
    /* background-color: red; */
  }
  #l1 p:nth-of-type(1){
    color: red;
    font-size: 20px;
  }
  #l1 p:nth-of-type(4){
    color: gray;
    font-size: 10px;
    width:200px;
    margin-bottom:10px ;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
  }
  #l1 p{
    color: gray;
    font-size: 10px;
    width:200px;
    margin-bottom:10px ;
  }
  #l2 p{
    color: black;
    font-size: 10px;
    /* width:200px; */
    /* margin-bottom:10px ; */
  }
  button{
    width:200px;
    height:30px;
    border:none;
    background-color: red;
    outline: none;
    margin-top: 20px;
    border-radius: 5px;
  }
  button:hover{
    box-shadow:  1px 0px 2px 1px #aaaaaa; 
  }
  #l2 span{
    color: red;
  }
  #ri{
    display: flex;
  }
  #ri div{
    margin-left: 80px;
    margin-top:50px;
    padding:5px;
    border-radius: 5px;
  }
  #ri div:hover{
    box-shadow:  1px 0px 2px 1px #aaaaaa; 
  }
  #ri div:nth-of-type(1){
    background-color:aqua;
  }
  #ri div:nth-of-type(2){
    background-color:blue;
  }
  #ri div:nth-of-type(3){
    background-color:red;
  }
  #app{
    display:flex;
  }
  #seats{
    margin-left: 40px;
    /* margin-top:20px; */
    /* padding:5px; */
    display:flex;
    height:300px;
    width:400px;
    /* background-color:palegreen; */
    justify-content:left;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-content: flex-start;

  }
  .seat{
    margin-left: 8px;
    width:40px;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top:8px;
    padding-bottom:8px ;
    padding-left: 10px;
    border-radius: 5px;
    background-color:aqua;
  }
  .seat2{
    margin-left: 8px;
    width:40px;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top:8px;
    padding-bottom:8px ;
    padding-left: 10px;
    border-radius: 5px;
    background-color:blue;
  }
  .seat3{
    margin-left: 8px;
    width:40px;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top:8px;
    padding-bottom:8px ;
    padding-left: 10px;
    border-radius: 5px;
    background-color:red;
    pointer-events: none;
    cursor: default;
  }

</style>
